<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            3d Switch
          </div>
          <div class="card-block">
            <label class="switch switch-3d switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-3d switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-3d switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-3d switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-3d switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-3d switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch default
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch default - pills
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-pill switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch outline
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch outline - pills
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-pill switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch outline alternative
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch outline alternative - pills
          </div>
          <div class="card-block">
            <label class="switch switch-default switch-pill switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-default switch-pill switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text - pills
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-pill switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text outline
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text outline - pills
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-pill switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text outline alternative
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with text outline alternative - pills
          </div>
          <div class="card-block">
            <label class="switch switch-text switch-pill switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-text switch-pill switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon - pills
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-pill switch-primary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-secondary">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-info">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon outline
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon outline - pills
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-pill switch-primary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-secondary-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-success-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-warning-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-info-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-danger-outline">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon outline alternative
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Switch with icon outline alternative - pills
          </div>
          <div class="card-block">
            <label class="switch switch-icon switch-pill switch-primary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-secondary-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-success-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-warning-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-info-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
            &nbsp;&nbsp;&nbsp;
            <label class="switch switch-icon switch-pill switch-danger-outline-alt">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
              <span class="switch-handle"></span>
            </label>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            Sizes
          </div>
          <div class="card-block p-0">
            <table class="table table-hover table-striped table-align-middle mb-0">
              <thead>
                <th>Size</th>
                <th>Example</th>
                <th>CSS Class</th>
              </thead>
              <tbody>
                <tr>
                  <td>
                    Large
                  </td>
                  <td>
                    <label class="switch switch-lg switch-3d switch-primary">
                      <input type="checkbox" class="switch-input" checked>
                      <span class="switch-label"></span>
                      <span class="switch-handle"></span>
                    </label>
                  </td>
                  <td>
                    Add following class <code>.switch-lg</code>
                  </td>
                </tr>
                <tr>
                  <td>
                    Normal
                  </td>
                  <td>
                    <label class="switch switch-3d switch-primary">
                      <input type="checkbox" class="switch-input" checked>
                      <span class="switch-label"></span>
                      <span class="switch-handle"></span>
                    </label>
                  </td>
                  <td>
                    -
                  </td>
                </tr>
                <tr>
                  <td>
                    Small
                  </td>
                  <td>
                    <label class="switch switch-sm switch-3d switch-primary">
                      <input type="checkbox" class="switch-input" checked>
                      <span class="switch-label"></span>
                      <span class="switch-handle"></span>
                    </label>
                  </td>
                  <td>
                    Add following class <code>.switch-sm</code>
                  </td>
                </tr>
                <tr>
                  <td>
                    Extra small
                  </td>
                  <td>
                    <label class="switch switch-xs switch-3d switch-primary">
                      <input type="checkbox" class="switch-input" checked>
                      <span class="switch-label"></span>
                      <span class="switch-handle"></span>
                    </label>
                  </td>
                  <td>
                    Add following class <code>.switch-sm</code>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
  </div>
</template>

<script>
export default {
  name: 'switches'
}
</script>
